<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery评论插件可回复评论代码</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<style>
	.container{
		width: 1000px;
	}
	.commentbox{
		width: 900px;
		margin: 20px auto;
	}
	.mytextarea {
	    width: 100%;
	    padding: 15px;
	    overflow: auto;
	    word-break: break-all;
	    height: 100px;
	    color: #000;
	    font-size: 1em;
	    resize: none;
	}
	.comment-list{
		width: 900px;
		margin: 20px auto;
		clear: both;
		padding-top: 20px;
	}
	.comment-list .comment-info{
		position: relative;
		margin-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #ccc;
	}
	.comment-list .comment-info header{
		width: 10%;
		position: absolute;
	}
	.comment-list .comment-info header img{
		width: 100%;
		border-radius: 50%;
		padding: 5px;
	}
	.comment-list .comment-info .comment-right{
		padding:5px 0px 5px 11%; 
	}
	.comment-list .comment-info .comment-right h3{
		margin: 5px 0px;
	}
	.comment-list .comment-info .comment-right .comment-content-header{
		height: 25px;
	}
	.comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span{
		padding-right: 2em;
		color: #aaa;
	}
	.comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{
		cursor: pointer;
	}
	.comment-list .comment-info .comment-right .reply-list {
		border-left: 3px solid #ccc;
		padding-left: 7px;
	}
	.comment-list .comment-info .comment-right .reply-list .reply{
		border-bottom: 1px dashed #ccc;
	}
	.comment-list .comment-info .comment-right .reply-list .reply div span{
		padding-left: 10px;
	}
	.comment-list .comment-info .comment-right .reply-list .reply p span{
		padding-right: 2em;
		color: #aaa;
	}
</style>
</head>
<body>

<div class="container">
	<div class="commentbox">
		<textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
		<div class="btn btn-info pull-right" id="comment">评论</div>
	</div>
	<div class="comment-list">
		<!-- 评论列表展示区域 -->
		
	</div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.comment.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	
	var jj='${jsonArr}';
	console.error(jj+"++++++++++++++");
	//var jsonObject=$.parseJSON(jsonString);
	//初始化数据
	var arr = [
		
		{id:1,img:"./images/img.jpg",replyName:"匿名",beReplyName:"",content:"我希望是一万年!",time:"2017-10-17 11:42:53",address:"深圳",osname:"win8.1",browse:"谷歌",replyBody:[]},
		{id:2,img:"./images/img.jpg",replyName:"匿名",beReplyName:"",content:"我求求你嫁给我，虽说我没车，没房，没钱，没钻戒，但我有一颗陪你到老的心！等你老了，我依然背着你，给你当拐杖；等你没牙了，我就嚼碎了再喂给你吃；我一定等你死了以后我再死，要不把你一个人留在这世上，没人照顾，我做鬼也不放心！",time:"2017-10-17 11:42:53",address:"深圳",osname:"",browse:"谷歌",replyBody:[{id:3,img:"",replyName:"K先生",beReplyName:"匿名",content:"兄dei，如果我是女的，就凭你这一句话我一定会嫁给你！",time:"2017-10-17 11:42:53",address:"",osname:"",browse:"谷歌"}]},
		{id:3,img:"./images/img.jpg",replyName:"K先生",beReplyName:"匿名",content:"深情不及久伴，由此，",time:"2017-10-17 11:42:53",address:"深圳",osname:"win10",browse:"谷歌",replyBody:[]},
		
	];
	//var arr=[{"id":2,"img":"./images/img.jpg","replyName":"st","beReplyName":"st","content":"很棒","time":"2017-10-17 11:42:53","address":"","osname":"","browse":"","replyBody":"[]"}];
	var arr=jj;
	$(function(){
// 		$(".comment-list").addCommentList({data:jj,add:""});
		
		$(".comment-list").addCommentList({data:arr,add:""});
		$("#comment").click(function(){
			var obj = new Object();
			obj.img="./images/img.jpg";
			obj.replyName="匿名";
			obj.content=$("#content").val();
			obj.browse="深圳";
			obj.osname="win10";
			obj.replyBody="";
			$(".comment-list").addCommentList({data:[],add:obj});
		});
	})
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
	<p></p>

</div>
</body>
</html>